<template>
  <div class="app-container">
    <!-- 左侧边栏 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <div class="logo-container">
          <el-icon :size="28" class="logo"><ChatDotRound /></el-icon>
          <span class="logo-text">HyperboostAI</span>
        </div>
        <el-button type="primary" class="new-chat-btn" @click="createNewChat">
          <el-icon><Plus /></el-icon> 开始新对话
        </el-button>
      </div>
      
      <div class="sidebar-menu">
        <div class="menu-section">
          <div class="menu-title">会话列表</div>
          <div 
            v-for="chat in historyChats" 
            :key="chat.id" 
            :class="['menu-item', chat.active ? 'active' : '']"
          >
            <div class="menu-item-content" @click="switchChat(chat.id)">
              <el-icon><ChatDotRound /></el-icon>
              <span class="menu-item-text">{{ chat.title }}</span>
            </div>
            <div class="menu-item-actions">
              <el-button type="text" @click.stop="deleteChat(chat.id, $event)" size="small">
                <el-icon><Delete /></el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 聊天头部 -->
      <div class="chat-header">
        <div class="chat-title">
          <span class="title-text">HyperboostAI 助手</span>
          <el-tag size="small" type="info" effect="plain">学习伙伴</el-tag>
        </div>
        <div class="header-actions">
          <el-tooltip content="清空对话" placement="bottom">
            <el-button circle size="small" @click="clearChat">
              <el-icon><Delete /></el-icon>
            </el-button>
          </el-tooltip>
        </div>
      </div>
      
      <!-- 聊天区域 -->
      <div class="chat-body">
        <div class="chat-messages" ref="messagesContainer">
          <!-- 欢迎信息 -->
          <div v-if="messages.length === 0" class="welcome-container">
            <div class="welcome-header">
              <h1 class="welcome-title">我是你的学习助手，随时为你提供帮助！</h1>
              <p class="welcome-subtitle">有任何学习问题、创意想法或者需要讨论的话题，都可以和我聊聊～</p>
            </div>
            
            <div class="quick-actions">
              <div class="quick-actions-title">快速开始</div>
              <div class="quick-actions-list">
                <div class="quick-action-item" 
                    v-for="(action, index) in quickActions" 
                    :key="index" 
                    @click="handleQuickAction(action)">
                  <el-icon><ArrowRight /></el-icon>
                  <span>{{ action }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 聊天消息 -->
          <div v-for="(message, index) in messages" :key="index" 
               :class="['message-container', message.role === 'user' ? 'user-message' : 'ai-message']">
            <!-- AI头像区域 - 只在AI消息时显示 -->
            <div v-if="message.role === 'assistant'" class="message-avatar ai-avatar-container">
              <el-avatar :size="36" class="ai-avatar">
                <el-icon><Promotion /></el-icon>
              </el-avatar>
            </div>
            
            <!-- 消息内容 -->
            <div class="message-content">
              <div class="message-body">
                <div v-if="message.role === 'user'">{{ message.content }}</div>
                <div v-else class="markdown-content" v-html="formatMarkdown(message.content)"></div>
                <!-- 加载状态指示器 - 仅在最新的AI消息且正在加载时显示 -->
                <div v-if="message.role === 'assistant' && isLoading && index === messages.length - 1" class="typing-indicator">
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </div>
              <div v-if="message.role === 'assistant'" class="message-actions">
                <el-button size="small" type="text" @click="copyToClipboard(message.content)">
                  <el-icon><DocumentCopy /></el-icon> 复制
                </el-button>
              </div>
            </div>
            
            <!-- 用户头像区域 - 只在用户消息时显示 -->
            <div v-if="message.role === 'user'" class="message-avatar user-avatar-container">
              <el-avatar :size="36" class="user-avatar">
                <el-icon><User /></el-icon>
              </el-avatar>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 聊天输入框 -->
      <div class="chat-footer">
        <div class="input-container">
          <el-input
            v-model="userInput"
            type="textarea"
            :rows="2"
            :placeholder="isLoading ? '请等待回复完成...' : '输入你想问的问题...' "
            resize="none"
            @keydown.enter.exact.prevent="sendMessage"
            @keydown.ctrl.enter="handleCtrlEnter"
            :disabled="isLoading"
            class="message-input"
          />
          <div class="input-actions">
            <el-button 
              type="primary" 
              circle
              :disabled="isLoading || !userInput.trim()" 
              @click="sendMessage"
              class="send-button"
            >
              <el-icon v-if="!isLoading"><Position /></el-icon>
              <el-icon v-else class="is-loading"><Loading /></el-icon>
            </el-button>
          </div>
        </div>
        <div class="footer-tips">
          <span>提示: 按Enter发送，Ctrl+Enter换行</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { sendMessageStream, getHistoryChat } from '@/api/chat'
import { useUserStore } from '@/store/user'
import { 
  ChatDotRound, 
  Delete, 
  Position, 
  ArrowRight,
  DocumentCopy, 
  EditPen,
  Plus,
  SetUp,
  Document,
  Monitor,
  Connection,
  Paperclip,
  Loading,
  User,
  Promotion
} from '@element-plus/icons-vue'

const userStore = useUserStore()
const messagesContainer = ref(null)
const messages = ref([])
const userInput = ref('')
const isLoading = ref(false)
const memoryId = ref(new Date().getTime()) // 生成唯一的对话ID

// 快速操作选项
const quickActions = [
  '如何有效地提高学习效率？',
  '帮我整理一份期末考试复习计划',
  '推荐一些适合学生阅读的书籍',
  '讲解一下高中数学中的微积分概念'
]

// 历史对话 - 从localStorage读取或使用默认空数组
const historyChats = ref(JSON.parse(localStorage.getItem('historyChats') || '[]'))

// 如果没有任何对话，创建一个空的新对话
if (historyChats.value.length === 0) {
  const newChatId = new Date().getTime()
  historyChats.value.push({
    id: newChatId,
    title: '新对话',
    active: true,
    memoryId: newChatId
  })
}

// 监听historyChats变化，保存到localStorage
watch(historyChats.value, () => {
  localStorage.setItem('historyChats', JSON.stringify(historyChats.value))
}, { deep: true })

// 激活的对话ID
const activeChat = ref(historyChats.value.find(chat => chat.active)?.id || historyChats.value[0].id)

// 切换对话
const switchChat = (chatId) => {
  activeChat.value = chatId
  // 在实际应用中，这里应该加载对应的聊天历史
  // 这里模拟清空当前对话并加载新对话
  messages.value = []
  
  // 更新历史对话的激活状态
  historyChats.value.forEach(chat => {
    chat.active = chat.id === chatId
    // 如果是当前选中的对话，使用其memoryId
    if (chat.active) {
      memoryId.value = chat.memoryId
    }
  })
  
  // 保存到localStorage
  localStorage.setItem('historyChats', JSON.stringify(historyChats.value))
  
  ElMessage.success(`已切换到：${historyChats.value.find(c => c.id === chatId)?.title || '新对话'}`)
}

// 新建对话
const createNewChat = () => {
  messages.value = []
  
  // 将所有对话设为非活跃
  historyChats.value.forEach(chat => {
    chat.active = false
  })
  
  // 创建新对话并添加到列表
  const newChatId = new Date().getTime()
  historyChats.value.push({
    id: newChatId,
    title: '新对话',
    active: true,
    memoryId: newChatId
  })
  
  // 更新当前活跃对话ID和memoryId
  activeChat.value = newChatId
  memoryId.value = newChatId
  
  // 保存到localStorage
  localStorage.setItem('historyChats', JSON.stringify(historyChats.value))
  
  ElMessage.success('已创建新对话')
}

// 删除对话
const deleteChat = (chatId, event) => {
  event.stopPropagation() // 阻止事件冒泡
  
  ElMessageBox.confirm('确定要删除这个对话吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 如果当前只有一个对话，则创建新的对话
    if (historyChats.value.length === 1) {
      createNewChat()
      historyChats.value = historyChats.value.filter(chat => chat.id !== chatId)
    } else {
      // 如果删除的是当前活跃对话
      const isActiveChat = historyChats.value.find(chat => chat.id === chatId)?.active
      
      // 先从列表中移除
      historyChats.value = historyChats.value.filter(chat => chat.id !== chatId)
      
      // 如果删除的是当前活跃对话，则激活第一个对话
      if (isActiveChat && historyChats.value.length > 0) {
        historyChats.value[0].active = true
        activeChat.value = historyChats.value[0].id
        memoryId.value = historyChats.value[0].memoryId
        
        // 清空当前消息并加载新对话内容
        messages.value = []
      }
    }
    
    // 保存到localStorage
    localStorage.setItem('historyChats', JSON.stringify(historyChats.value))
    
    ElMessage.success('对话已删除')
  }).catch(() => {
    // 取消删除
  })
}

// 清空当前对话
const clearChat = () => {
  ElMessageBox.confirm('确定要清空当前对话吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    messages.value = []
    ElMessage.success('对话已清空')
  }).catch(() => {
    // 取消清空
  })
}

// 发送消息
const sendMessage = async () => {
  // 如果正在加载或输入为空，不发送
  if (isLoading.value || !userInput.value.trim()) {
    return
  }
  
  // 检查用户是否已登录
  if (!userStore.token) {
    ElMessage.warning('请先登录后再与AI对话')
    return
  }
  
  // 添加用户消息到消息列表
  const userMessage = {
    role: 'user',
    content: userInput.value.trim(),
    time: new Date().getTime()
  }
  messages.value.push(userMessage)
  
  // 添加AI回复(初始为空)
  const aiMessage = {
    role: 'assistant',
    content: '',
    time: new Date().getTime()
  }
  messages.value.push(aiMessage)
  
  // 清空输入框并设置加载状态
  const input = userInput.value.trim()
  userInput.value = ''
  isLoading.value = true
  
  // 滚动到底部
  await nextTick()
  scrollToBottom()
  
  try {
    // 如果是第一条消息，更新对话标题
    if (messages.value.length === 1) {
      updateChatTitle(input)
    }
    
    // 设置请求超时处理
    let requestTimedOut = false;
    const requestTimeout = setTimeout(() => {
      requestTimedOut = true;
      console.log('手动处理请求超时，启用模拟回复');
      
      // 检查AI消息内容，如果已有内容则保留
      if (aiMessage.content.trim().length > 0) {
        console.log('已收到部分响应，使用已接收内容');
        isLoading.value = false;
        return;
      }
      
      // API请求超时，使用模拟回复
      const simulatedResponse = generateSimulatedResponse(input);
      aiMessage.content = simulatedResponse;
      isLoading.value = false;
      
    }, 60000); // 将超时时间设置为60秒
    
    try {
      // 尝试使用API
      sendMessageStream(
        { 
          message: input,
          memoryId: memoryId.value
        }, 
        (chunk) => {
          // 如果已经启用了模拟回复，不处理API返回的内容
          if (requestTimedOut) return;
          
          try {
            // 实时更新AI回复内容
            if (chunk && typeof chunk === 'string') {
              aiMessage.content += chunk;
              // 每次接收内容都滚动到底部
              nextTick(() => {
                scrollToBottom();
              });
            } else {
              console.warn('接收到非字符串类型的响应块:', chunk);
            }
          } catch (err) {
            console.warn('处理响应块时出错:', err);
          }
        }
      ).then((result) => {
        clearTimeout(requestTimeout); // 清除超时处理
        if (!requestTimedOut) { // 如果没有启用模拟回复
          console.log('聊天请求完成，总响应长度:', result ? result.length : 0);
          isLoading.value = false;
        }
      }).catch(error => {
        clearTimeout(requestTimeout); // 清除超时处理
        
        // 检查响应是否有内容，如果已有内容则不使用模拟回复
        if (!requestTimedOut && aiMessage.content.trim().length > 0) {
          console.warn('API调用遇到错误，但已收到部分响应，使用已接收内容', error);
          isLoading.value = false;
          return;
        }
          
        if (!requestTimedOut) { // 如果没有启用模拟回复也没有收到任何内容
          console.error('API调用失败，使用模拟回复', error);
          
          // API调用失败，使用模拟回复
          const simulatedResponse = generateSimulatedResponse(input);
          aiMessage.content = simulatedResponse;
          isLoading.value = false;
        }
      });
    } catch (error) {
      clearTimeout(requestTimeout); // 清除超时处理
      if (!requestTimedOut) { // 如果没有启用模拟回复
        console.error('发送消息失败，使用模拟回复', error);
        
        // 直接使用模拟回复
        const simulatedResponse = generateSimulatedResponse(input);
        aiMessage.content = simulatedResponse;
        isLoading.value = false;
      }
    }
  } catch (error) {
    console.error('发送消息错误:', error);
    ElMessage.error('发送消息失败，请稍后重试');
    isLoading.value = false;
  }
}

// 处理快捷操作选择
const handleQuickAction = (action) => {
  userInput.value = action
  sendMessage()
}

// 处理Ctrl+Enter
const handleCtrlEnter = () => {
  userInput.value += '\n'
}

// 滚动到底部
const scrollToBottom = () => {
  if (messagesContainer.value) {
    nextTick(() => {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    })
  }
}

// 更新对话标题
const updateChatTitle = (userMessage) => {
  // 获取当前活跃对话
  const currentChat = historyChats.value.find(chat => chat.active)
  if (currentChat) {
    // 从用户输入中提取前15个字符作为标题
    const title = userMessage.length > 15 ? userMessage.substring(0, 15) + '...' : userMessage
    currentChat.title = title
    
    // 保存到localStorage
    localStorage.setItem('historyChats', JSON.stringify(historyChats.value))
  }
}

// 格式化时间
const formatTime = (timestamp = Date.now()) => {
  const date = new Date(timestamp)
  return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
}

// 格式化Markdown
const formatMarkdown = (text) => {
  if (!text) return '';
  
  // 简单的Markdown解析
  return text
    // 处理标题
    .replace(/^# (.*?)$/gm, '<h1>$1</h1>')
    .replace(/^## (.*?)$/gm, '<h2>$1</h2>')
    .replace(/^### (.*?)$/gm, '<h3>$1</h3>')
    
    // 处理粗体和斜体
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.*?)\*/g, '<em>$1</em>')
    
    // 处理列表
    .replace(/^\- (.*?)$/gm, '<li>$1</li>')
    .replace(/^\d+\. (.*?)$/gm, '<li>$1</li>')
    
    // 处理链接
    .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank">$1</a>')
    
    // 处理代码块
    .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
    .replace(/`(.*?)`/g, '<code>$1</code>')
    
    // 处理换行
    .replace(/\n/g, '<br>');
}

// 复制到剪贴板
const copyToClipboard = (text) => {
  navigator.clipboard.writeText(text).then(() => {
    ElMessage.success('已复制到剪贴板')
  }).catch(() => {
    ElMessage.error('复制失败')
  })
}

// 初始化时滚动到底部
onMounted(() => {
  scrollToBottom()
})

// 模拟响应生成函数
const generateSimulatedResponse = (input) => {
  // 针对不同输入提供不同的预设回复
  const defaultResponses = [
    "我目前无法连接到服务器，但我很乐意在恢复连接后回答您的问题。请稍后再试。",
    "抱歉，服务器响应超时。您的问题很有价值，请稍后再试或换个话题。",
    "网络连接出现问题，无法获取回复。请检查您的网络连接并稍后重试。",
    "由于技术原因，我无法处理您的请求。团队正在努力解决这个问题。"
  ];
  
  // 针对特定关键词的回复
  if (input.includes("故事")) {
    return "抱歉，我当前无法连接到服务器来为您生成故事。请稍后再试，我很期待能为您创作一个精彩的故事。";
  } else if (input.includes("帮我") || input.includes("怎么")) {
    return "我很想帮助您解决这个问题，但当前无法连接到服务器。请稍后再尝试，我会尽我所能提供帮助。";
  } else if (input.includes("介绍") || input.includes("是什么")) {
    return "对不起，我暂时无法获取相关信息。请稍后再试，我会为您提供详细的介绍。";
  }
  
  // 随机返回一个默认回复
  return defaultResponses[Math.floor(Math.random() * defaultResponses.length)];
};

// 模拟打字效果
const simulateTyping = (text, callback) => {
  let index = 0;
  const typingSpeed = 50; // 每个字符的打字速度（毫秒）
  
  const typeNextChar = () => {
    if (index < text.length) {
      callback(text.charAt(index));
      index++;
      setTimeout(typeNextChar, typingSpeed);
    }
  };
  
  typeNextChar();
};
</script>

<style scoped>
.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background-color: #f8fafc;
}

.sidebar {
  width: 280px;
  height: 100%;
  background-color: #fff;
  border-right: 1px solid #eaecef;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  box-shadow: 1px 0 8px rgba(0, 0, 0, 0.05);
  z-index: 20;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #eaecef;
}

.logo-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.logo {
  color: #4d7cfe;
  margin-right: 12px;
}

.logo-text {
  font-size: 20px;
  font-weight: 700;
  color: #2c3e50;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #4d7cfe, #6861fe);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.new-chat-btn {
  width: 100%;
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(135deg, #4d7cfe, #6861fe);
  border: none;
  transition: all 0.3s ease;
  font-weight: 500;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(77, 124, 254, 0.2);
}

.new-chat-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(77, 124, 254, 0.3);
}

.new-chat-btn:active {
  transform: translateY(0);
}

.sidebar-menu {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.sidebar-menu::-webkit-scrollbar {
  width: 4px;
}

.sidebar-menu::-webkit-scrollbar-thumb {
  background-color: #dfe2e5;
  border-radius: 4px;
}

.menu-section {
  margin-bottom: 24px;
}

.menu-title {
  font-size: 14px;
  font-weight: 600;
  color: #606266;
  margin-bottom: 16px;
  padding-left: 8px;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.menu-item:hover {
  background-color: #f5f7fa;
}

.menu-item.active {
  background-color: #e6f0ff;
}

.menu-item-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  overflow: hidden;
}

.menu-item-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  color: #2c3e50;
}

.menu-item-actions {
  display: flex;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease;
}

.menu-item:hover .menu-item-actions {
  visibility: visible;
  opacity: 1;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: #fff;
  border-bottom: 1px solid #eaecef;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  z-index: 10;
}

.chat-title {
  display: flex;
  align-items: center;
}

.title-text {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-right: 12px;
}

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background-color: #f8fafc;
  scroll-behavior: smooth;
}

.chat-body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.chat-body::-webkit-scrollbar-thumb {
  background-color: #dfe2e5;
  border-radius: 6px;
}

.chat-body::-webkit-scrollbar-track {
  background-color: transparent;
}

.chat-messages {
  max-width: 900px;
  margin: 0 auto;
}

/* 欢迎页样式 */
.welcome-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.welcome-header {
  margin-bottom: 50px;
}

.welcome-title {
  font-size: 36px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #4d7cfe, #6861fe);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.3;
}

.welcome-subtitle {
  font-size: 16px;
  color: #606266;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.quick-actions {
  width: 100%;
  max-width: 700px;
}

.quick-actions-title {
  font-weight: 600;
  margin-bottom: 20px;
  color: #2c3e50;
  font-size: 18px;
}

.quick-actions-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.quick-action-item {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(234, 236, 239, 0.7);
}

.quick-action-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  background: linear-gradient(to right, #f5f9ff, #eef5ff);
  border-color: rgba(77, 124, 254, 0.2);
}

.quick-action-item el-icon {
  margin-right: 16px;
  color: #4d7cfe;
  font-size: 18px;
}

/* 消息样式 */
.message-container {
  display: flex;
  margin-bottom: 32px;
  transition: all 0.3s ease;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.user-message {
  justify-content: flex-end;
}

.ai-message {
  justify-content: flex-start;
}

.message-avatar {
  margin-top: 6px;
  animation: popIn 0.3s ease;
}

@keyframes popIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.user-avatar-container {
  margin-left: 16px;
}

.ai-avatar-container {
  margin-right: 16px;
}

.ai-avatar {
  background: linear-gradient(135deg, #4d7cfe, #6861fe);
  color: white;
  box-shadow: 0 4px 12px rgba(77, 124, 254, 0.25);
}

.user-avatar {
  background: linear-gradient(135deg, #67c23a, #40a030);
  color: white;
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.25);
}

.message-content {
  max-width: 80%;
}

.message-body {
  padding: 16px;
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  transition: all 0.3s ease;
}

.user-message .message-body {
  background: linear-gradient(135deg, #e6f0ff, #f0f5ff);
  color: #2c3e50;
  border-radius: 18px 2px 18px 18px;
  box-shadow: 0 4px 12px rgba(77, 124, 254, 0.1);
}

.ai-message .message-body {
  background-color: #fff;
  color: #2c3e50;
  border-radius: 2px 18px 18px 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.message-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ai-message:hover .message-actions {
  opacity: 1;
}

/* 打字指示器 */
.typing-indicator {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.typing-indicator span {
  height: 8px;
  width: 8px;
  background-color: #bcc0c7;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  animation: typing 1.5s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) {
  animation-delay: 0s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
  margin-right: 0;
}

@keyframes typing {
  0% {
    transform: translateY(0px);
    background-color: #bcc0c7;
  }
  28% {
    transform: translateY(-5px);
    background-color: #4d7cfe;
  }
  44% {
    transform: translateY(0px);
    background-color: #bcc0c7;
  }
}

/* 输入框区域 */
.chat-footer {
  background-color: #fff;
  padding: 20px 24px;
  border-top: 1px solid #eaecef;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03);
}

.input-container {
  display: flex;
  align-items: flex-end;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

.message-input {
  flex: 1;
  margin-right: 16px;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

:deep(.el-textarea__inner) {
  padding: 14px 18px;
  border-radius: 16px;
  resize: none;
  min-height: 60px !important;
  transition: all 0.3s ease;
  border: 1px solid #e6e9ed;
  font-size: 15px;
}

:deep(.el-textarea__inner:focus) {
  box-shadow: 0 0 0 3px rgba(77, 124, 254, 0.15);
  border-color: #4d7cfe;
}

.send-button {
  background: linear-gradient(135deg, #4d7cfe, #6861fe);
  border: none;
  width: 46px;
  height: 46px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(77, 124, 254, 0.2);
}

.send-button:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 16px rgba(77, 124, 254, 0.3);
}

.send-button:active {
  transform: translateY(0) scale(0.98);
}

.footer-tips {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12px;
  color: #909399;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Markdown 内容样式 */
.markdown-content {
  font-size: 15px;
}

.markdown-content pre {
  background-color: #f5f7fa;
  padding: 16px;
  border-radius: 12px;
  overflow-x: auto;
  margin: 18px 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.markdown-content code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  padding: 2px 5px;
  background-color: #f5f7fa;
  border-radius: 4px;
  font-size: 0.9em;
  color: #476582;
}

.markdown-content pre code {
  padding: 0;
  background-color: transparent;
  color: inherit;
}

.markdown-content p {
  margin: 10px 0;
}

.markdown-content h1, .markdown-content h2, .markdown-content h3 {
  margin-top: 28px;
  margin-bottom: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: #2c3e50;
}

.markdown-content h1 {
  font-size: 22px;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 8px;
}

.markdown-content h2 {
  font-size: 20px;
}

.markdown-content h3 {
  font-size: 18px;
}

.markdown-content ul, .markdown-content ol {
  padding-left: 24px;
  margin: 16px 0;
}

.markdown-content li {
  margin: 8px 0;
}

.markdown-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.markdown-content table th,
.markdown-content table td {
  border: 1px solid #eaecef;
  padding: 12px 16px;
  text-align: left;
}

.markdown-content table th {
  background-color: #f5f7fa;
  font-weight: 600;
}

.markdown-content table tr:nth-child(even) {
  background-color: #f9fafc;
}

.markdown-content blockquote {
  padding: 0 16px;
  border-left: 4px solid #4d7cfe;
  background-color: #f5f9ff;
  color: #476582;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .sidebar {
    width: 240px;
  }
  
  .message-content {
    max-width: 90%;
  }
  
  .quick-actions-list {
    grid-template-columns: 1fr;
  }
  
  .welcome-title {
    font-size: 28px;
  }
}

@media (max-width: 576px) {
  .app-container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #eaecef;
  }
  
  .welcome-title {
    font-size: 24px;
  }
  
  .chat-body {
    padding: 16px;
  }
  
  .message-body {
    padding: 14px;
  }
}
</style> 